<template>
  <div class="login-container">    <!-- 背景装饰 -->
    <div class="background-decoration">
      <!-- 浮动图形 -->
      <div class="floating-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
        <div class="shape shape-4"></div>
        <div class="shape shape-5"></div>
      </div>
      
      <!-- 健身器械装饰元素 -->
      <div class="fitness-elements">        <!-- 哑铃 -->
        <div class="fitness-icon dumbbell-1">
          <n-icon size="40" color="rgba(255, 255, 255, 0.25)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M20.57,14.86L22,13.43L20.57,12L17,15.57L8.43,7L12,3.43L10.57,2L9.14,3.43L7.71,2L5.57,4.14L4.14,2.71L2.71,4.14L4.14,5.57L2,7.71L3.43,9.14L2,10.57L3.43,12L7,8.43L15.57,17L12,20.57L13.43,22L14.86,20.57L16.29,22L18.43,19.86L19.86,21.29L21.29,19.86L19.86,18.43L22,16.29L20.57,14.86Z"/>
            </svg>
          </n-icon>
        </div>
        
        <!-- 杠铃 -->
        <div class="fitness-icon barbell-1">
          <n-icon size="35" color="rgba(255, 255, 255, 0.22)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M2,9V15H4V13H20V15H22V9H20V11H4V9H2M6,11H18V13H6V11Z"/>
            </svg>
          </n-icon>
        </div>
        
        <!-- 跑步机 -->
        <div class="fitness-icon treadmill-1">
          <n-icon size="32" color="rgba(255, 255, 255, 0.20)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M9,9H15L13,15H11L9,9Z"/>
            </svg>
          </n-icon>
        </div>
        
        <!-- 健身器械图标 -->
        <div class="fitness-icon equipment-1">
          <n-icon size="38" color="rgba(255, 255, 255, 0.18)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M7,7H17V10H19V14H17V17H7V14H5V10H7V7M9,9V15H15V9H9M11,11H13V13H11V11Z"/>
            </svg>
          </n-icon>
        </div>
        
        <!-- 更多哑铃装饰 -->
        <div class="fitness-icon dumbbell-2">
          <n-icon size="28" color="rgba(255, 255, 255, 0.20)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M20.57,14.86L22,13.43L20.57,12L17,15.57L8.43,7L12,3.43L10.57,2L9.14,3.43L7.71,2L5.57,4.14L4.14,2.71L2.71,4.14L4.14,5.57L2,7.71L3.43,9.14L2,10.57L3.43,12L7,8.43L15.57,17L12,20.57L13.43,22L14.86,20.57L16.29,22L18.43,19.86L19.86,21.29L21.29,19.86L19.86,18.43L22,16.29L20.57,14.86Z"/>
            </svg>
          </n-icon>
        </div>
          <!-- 哑铃3 -->
        <div class="fitness-icon dumbbell-3">
          <n-icon size="30" color="rgba(255, 255, 255, 0.22)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M20.57,14.86L22,13.43L20.57,12L17,15.57L8.43,7L12,3.43L10.57,2L9.14,3.43L7.71,2L5.57,4.14L4.14,2.71L2.71,4.14L4.14,5.57L2,7.71L3.43,9.14L2,10.57L3.43,12L7,8.43L15.57,17L12,20.57L13.43,22L14.86,20.57L16.29,22L18.43,19.86L19.86,21.29L21.29,19.86L19.86,18.43L22,16.29L20.57,14.86Z"/>
            </svg>
          </n-icon>
        </div>
        
        <!-- 健身球 -->
        <div class="fitness-icon fitness-ball">
          <n-icon size="26" color="rgba(255, 255, 255, 0.20)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z"/>
            </svg>
          </n-icon>
        </div>
          <!-- 瑜伽垫 -->
        <div class="fitness-icon yoga-mat">
          <n-icon size="34" color="rgba(255, 255, 255, 0.18)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M5,2C4.45,2 4,2.45 4,3V21C4,21.55 4.45,22 5,22H19C19.55,22 20,21.55 20,21V3C20,2.45 19.55,2 19,2H5M6,4H18V20H6V4Z"/>
            </svg>
          </n-icon>
        </div>
        
        <!-- 新增健身元素 -->
        <!-- 举重训练 -->
        <div class="fitness-icon weightlifting-1">
          <n-icon size="36" color="rgba(255, 255, 255, 0.20)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M2,9V15H4V13H20V15H22V9H20V11H4V9H2M6,11H18V13H6V11Z"/>
            </svg>
          </n-icon>
        </div>
        
        <!-- 拳击手套 -->
        <div class="fitness-icon boxing-gloves">
          <n-icon size="32" color="rgba(255, 255, 255, 0.22)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M12,2C10.89,2 10,2.89 10,4C10,5.11 10.89,6 12,6C13.11,6 14,5.11 14,4C14,2.89 13.11,2 12,2M21,9V7L15,13.5C14.7,13.8 14.4,14 14,14C13.6,14 13.3,13.8 13,13.5L9,9.5C8.7,9.2 8.4,9 8,9S7.3,9.2 7,9.5L3,13.5V15.5L7,11.5C7.3,11.2 7.6,11 8,11S8.7,11.2 9,11.5L13,15.5C13.3,15.8 13.6,16 14,16C14.4,16 14.7,15.8 15,15.5L21,9Z"/>
            </svg>
          </n-icon>
        </div>
        
        <!-- 哑铃架 -->
        <div class="fitness-icon dumbbell-rack">
          <n-icon size="38" color="rgba(255, 255, 255, 0.19)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M3,3V5H4V19H3V21H6V19H18V21H21V19H20V5H21V3H18V5H6V3H3M8,7H16V17H8V7Z"/>
            </svg>
          </n-icon>
        </div>
        
        <!-- 运动鞋 -->
        <div class="fitness-icon running-shoes">
          <n-icon size="30" color="rgba(255, 255, 255, 0.21)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M2.5,8.5C2.5,9.3 3.2,10 4,10H7V12H2.5C1.7,12 1,12.7 1,13.5S1.7,15 2.5,15H7V17H21.5C22.3,17 23,16.3 23,15.5S22.3,14 21.5,14H9V12H22.5C23.3,12 24,11.3 24,10.5S23.3,9 22.5,9H9V8.5C9,7.7 8.3,7 7.5,7H4C3.2,7 2.5,7.7 2.5,8.5Z"/>
            </svg>
          </n-icon>
        </div>
        
        <!-- 健身计时器 -->
        <div class="fitness-icon timer">
          <n-icon size="28" color="rgba(255, 255, 255, 0.18)">
            <svg viewBox="0 0 24 24">
              <path fill="currentColor" d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M19.03,7.39L20.45,5.97C20,5.46 19.55,5 19.04,4.56L17.62,6C16.07,4.74 14.12,4 12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22C17,22 21,17.97 21,13C21,10.88 20.26,8.93 19.03,7.39M11,14H13V8H11M15,1H9V3H15V1Z"/>
            </svg>
          </n-icon>
        </div>
      </div>
      
      <!-- 粒子装饰效果 -->
      <div class="particles">
        <div class="particle particle-1"></div>
        <div class="particle particle-2"></div>
        <div class="particle particle-3"></div>
        <div class="particle particle-4"></div>
        <div class="particle particle-5"></div>
        <div class="particle particle-6"></div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <!-- Logo 和标题区域 -->
      <div class="header-section">
        <div class="logo-container">          <div class="logo-icon">
            <n-icon size="52" color="#ffffff">
              <svg viewBox="0 0 24 24">
                <path fill="currentColor" d="M20.57,14.86L22,13.43L20.57,12L17,15.57L8.43,7L12,3.43L10.57,2L9.14,3.43L7.71,2L5.57,4.14L4.14,2.71L2.71,4.14L4.14,5.57L2,7.71L3.43,9.14L2,10.57L3.43,12L7,8.43L15.57,17L12,20.57L13.43,22L14.86,20.57L16.29,22L18.43,19.86L19.86,21.29L21.29,19.86L19.86,18.43L22,16.29L20.57,14.86Z" />
              </svg>
            </n-icon>
          </div>
          <h1 class="app-title">器械通</h1>
          <p class="app-subtitle">健身器械一站式服务平台</p>
        </div>
      </div>
      
      <!-- 登录注册卡片 -->
      <n-card class="login-card">
        <n-tabs
            class="card-tabs"
            v-model:value="activeTab"
            size="large"
            animated
            type="line"
            pane-wrapper-style="margin: 0 -4px"
            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
        >
          <n-tab-pane name="signin" tab="登录">
            <div class="form-section">
              <n-form :model="loginForm" size="large">
                <n-form-item path="username">
                  <n-input 
                    v-model:value="loginForm.username" 
                    placeholder="请输入用户名"
                    size="large"
                    round
                  >
                    <template #prefix>
                      <n-icon color="#999">
                        <svg viewBox="0 0 24 24">
                          <path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                        </svg>
                      </n-icon>
                    </template>
                  </n-input>
                </n-form-item>
                <n-form-item path="password">
                  <n-input 
                    v-model:value="loginForm.password" 
                    type="password" 
                    placeholder="请输入密码"
                    size="large"
                    round
                    show-password-on="click"
                    @keyup.enter="login"
                  >
                    <template #prefix>
                      <n-icon color="#999">
                        <svg viewBox="0 0 24 24">
                          <path fill="currentColor" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
                        </svg>
                      </n-icon>
                    </template>
                  </n-input>
                </n-form-item>
              </n-form>
              
              <div class="login-actions">
                <n-button 
                  type="primary" 
                  block 
                  size="large" 
                  round
                  class="login-btn"
                  :loading="loginLoading"
                  @click="login"
                >
                  <template #icon>
                    <n-icon>
                      <svg viewBox="0 0 24 24">
                        <path fill="currentColor" d="M10,17V14H3V10H10V7L15,12L10,17Z"/>
                      </svg>
                      </n-icon>
                  </template>
                  登录
                </n-button>
              </div>
            </div>
          </n-tab-pane>          <n-tab-pane name="signup" tab="注册">
            <div class="form-section">
              <n-form ref="registerForm" :model="saveUserForm" :rules="registerRules" size="large">
                <n-form-item path="username">
                  <n-input 
                    v-model:value="saveUserForm.username" 
                    placeholder="请输入用户名"
                    size="large"
                    round
                  >
                    <template #prefix>
                      <n-icon color="#999">
                        <svg viewBox="0 0 24 24">
                          <path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                        </svg>
                      </n-icon>
                    </template>
                  </n-input>
                </n-form-item>
                
                <n-form-item path="password">
                  <n-input 
                    v-model:value="saveUserForm.password" 
                    type="password" 
                    placeholder="请输入密码"
                    size="large"
                    round
                    show-password-on="click"
                  >
                    <template #prefix>
                      <n-icon color="#999">
                        <svg viewBox="0 0 24 24">
                          <path fill="currentColor" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
                        </svg>
                      </n-icon>
                    </template>
                  </n-input>
                </n-form-item>
                
                <n-form-item path="rePassword">
                  <n-input 
                    v-model:value="saveUserForm.rePassword" 
                    type="password" 
                    placeholder="请再次输入密码"
                    size="large"
                    round
                    show-password-on="click"
                  >
                    <template #prefix>
                      <n-icon color="#999">
                        <svg viewBox="0 0 24 24">
                          <path fill="currentColor" d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.6 14.8,10V11.5C15.4,11.5 16,12.1 16,12.7V16.7C16,17.4 15.4,18 14.7,18H9.2C8.6,18 8,17.4 8,16.8V12.8C8,12.1 8.6,11.5 9.2,11.5V10C9.2,8.6 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,10V11.5H13.6V10C13.6,8.7 12.8,8.2 12,8.2Z"/>
                        </svg>
                      </n-icon>
                    </template>
                  </n-input>
                </n-form-item>
                
                <n-form-item path="phone">
                  <n-input 
                    v-model:value="saveUserForm.phone" 
                    placeholder="请输入手机号"
                    size="large"
                    round
                  >
                    <template #prefix>
                      <n-icon color="#999">
                        <svg viewBox="0 0 24 24">
                          <path fill="currentColor" d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z"/>
                        </svg>
                      </n-icon>
                    </template>
                  </n-input>
                </n-form-item>
                
                <div class="form-row">
                  <n-form-item path="height" class="half-width">
                    <n-input 
                      v-model:value="saveUserForm.height" 
                      placeholder="身高(cm)"
                      size="large"
                      round
                    >
                      <template #prefix>
                        <n-icon color="#999">
                          <svg viewBox="0 0 24 24">
                            <path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,13H17L14.5,10.5L13.08,11.92L12,10.83L7,13M10.5,6A1.5,1.5 0 0,0 9,7.5A1.5,1.5 0 0,0 10.5,9A1.5,1.5 0 0,0 12,7.5A1.5,1.5 0 0,0 10.5,6Z"/>
                          </svg>
                        </n-icon>
                      </template>
                    </n-input>
                  </n-form-item>
                  
                  <n-form-item path="weight" class="half-width">
                    <n-input 
                      v-model:value="saveUserForm.weight" 
                      placeholder="体重(kg)"
                      size="large"
                      round
                    >                      <template #prefix>
                        <n-icon color="#999">
                          <svg viewBox="0 0 24 24">
                            <path fill="currentColor" d="M12,3A4,4 0 0,1 16,7A4,4 0 0,1 12,11A4,4 0 0,1 8,7A4,4 0 0,1 12,3M12,5A2,2 0 0,0 10,7A2,2 0 0,0 12,9A2,2 0 0,0 14,7A2,2 0 0,0 12,5M21,14V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V14A2,2 0 0,1 5,12H7L8.5,10.5L11.5,13.5H12.5L15.5,10.5L17,12H19A2,2 0 0,1 21,14Z"/>
                          </svg>
                        </n-icon>
                      </template>
                    </n-input>
                  </n-form-item>
                </div>
                  <n-form-item path="role">
                  <div class="role-selection">
                    <!-- 使用 n-card 组件作为身份选择提示 -->
                    <n-card 
                      size="small"
                      class="role-instruction-card"
                      :bordered="false"
                    >
                      <template #header>
                        <n-flex align="center" :size="8">
                          <n-icon size="20" color="#18a058">
                            <svg viewBox="0 0 24 24">
                              <path fill="currentColor" d="M16,4C16.88,4 17.67,4.38 18.18,5H20C21.11,5 22,5.89 22,7V9C22,10.11 21.11,11 20,11H19V20C19,21.11 18.11,22 17,22H13V16H11V22H7C5.89,22 5,21.11 5,20V11H4C2.89,11 2,10.11 2,9V7C2,5.89 2.89,5 4,5H5.82C6.33,4.38 7.12,4 8,4H16M8,6V8H7V9H17V8H16V6H8Z"/>
                            </svg>
                          </n-icon>
                          <span style="font-weight: 600; color: #18a058;">请选择您的身份</span>
                        </n-flex>
                      </template>                      <n-text depth="2" style="font-size: 14px;">
                        根据您的使用需求，选择对应的身份类型，享受专属功能体验
                      </n-text>
                    </n-card>

                    <n-radio-group v-model:value="saveUserForm.role" class="role-group">
                      <div class="role-options">
                        <n-radio :value="1" class="role-option">
                          <div class="role-content">
                            <n-icon size="24" color="#18a058">
                              <svg viewBox="0 0 24 24">
                                <path fill="currentColor" d="M12,2A3,3 0 0,1 15,5A3,3 0 0,1 12,8A3,3 0 0,1 9,5A3,3 0 0,1 12,2M21,9V7L15,13.5C14.7,13.8 14.4,14 14,14C13.6,14 13.3,13.8 13,13.5L9,9.5C8.7,9.2 8.4,9 8,9S7.3,9.2 7,9.5L3,13.5V15.5L7,11.5C7.3,11.2 7.6,11 8,11S8.7,11.2 9,11.5L13,15.5C13.3,15.8 13.6,16 14,16C14.4,16 14.7,15.8 15,15.5L21,9Z"/>
                              </svg>
                            </n-icon>
                            <span>健身爱好者</span>
                          </div>
                        </n-radio>
                        <n-radio :value="2" class="role-option">
                          <div class="role-content">
                            <n-icon size="24" color="#18a058">
                              <svg viewBox="0 0 24 24">
                                <path fill="currentColor" d="M12,2A3,3 0 0,1 15,5A3,3 0 0,1 12,8A3,3 0 0,1 9,5A3,3 0 0,1 12,2M21,16V4H20L16,8H13L16.5,12H18.5C19.3,12 20,12.7 20,13.5V16C20,16.6 19.6,17 19,17H5C4.4,17 4,16.6 4,16V13.5C4,12.7 4.7,12 5.5,12H6.5L10,8H7L3,4H2V16A2,2 0 0,0 4,18H20A2,2 0 0,0 22,16H21Z"/>
                              </svg>
                            </n-icon>
                            <span>健身教练</span>
                          </div>
                        </n-radio>
                        <n-radio :value="3" class="role-option">
                          <div class="role-content">
                            <n-icon size="24" color="#18a058">
                              <svg viewBox="0 0 24 24">
                                <path fill="currentColor" d="M12,18H6V14H12M21,14V12L20,7H4L3,12V14H4V20A1,1 0 0,0 5,21H11A1,1 0 0,0 12,20V14M5,9H19L19.5,12H4.5L5,9Z"/>
                              </svg>
                            </n-icon>
                            <span>器械商家</span>
                          </div>
                        </n-radio>
                        <n-radio :value="4" class="role-option">
                          <div class="role-content">
                            <n-icon size="24" color="#18a058">
                              <svg viewBox="0 0 24 24">
                                <path fill="currentColor" d="M21,16V4A2,2 0 0,0 19,2H5A2,2 0 0,0 3,4V16A2,2 0 0,0 5,18H9L12,21L15,18H19A2,2 0 0,0 21,16M12,6A2,2 0 0,1 14,8A2,2 0 0,1 12,10A2,2 0 0,1 10,8A2,2 0 0,1 12,6M16,14H8V13C8,11.67 10.67,11 12,11C13.33,11 16,11.67 16,13V14Z"/>
                              </svg>
                            </n-icon>
                            <span>场馆人员</span>
                          </div>
                        </n-radio>                      </div>
                    </n-radio-group>
                  </div>
                </n-form-item>
              </n-form>
              
              <div class="register-actions">
                <n-button 
                  type="primary" 
                  block 
                  size="large" 
                  round
                  class="register-btn"
                  :loading="registerLoading"
                  @click="handleRegister"
                >
                  <template #icon>
                    <n-icon>
                      <svg viewBox="0 0 24 24">
                        <path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
                      </svg>
                    </n-icon>
                  </template>
                  创建账户
                </n-button>
              </div>
            </div>          </n-tab-pane>
        </n-tabs>
      </n-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import qs from "qs";
import axios from "axios";
import { useMessage } from "naive-ui";
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const message = useMessage();
const registerForm = ref(null);
const activeTab = ref('signin');
const loginLoading = ref(false);
const registerLoading = ref(false);

//登录填写的数据
const loginForm = ref({
  username: "",
  password: ""
});

//注册填写的数据
const saveUserForm = ref({
  username: "",
  password: "",
  rePassword: "",
  phone: "",
  height: "",
  weight: "",
  role: 1, // 默认选择健身爱好者
});

// 注册表单验证规则
const registerRules = {
  username: [
    { required: true, message: "请输入用户名", trigger: ["blur", "input"] }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: ["blur", "input"] },
    { min: 6, message: "密码长度不能小于6位", trigger: ["blur", "input"] }
  ],
  rePassword: [
    { required: true, message: "请再次输入密码", trigger: ["blur", "input"] },
    {
      validator: (rule, value) => {
        return value === saveUserForm.value.password;
      },
      message: "两次输入的密码不一致",
      trigger: ["blur", "input"]
    }
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: ["blur", "input"] },
    {
      validator: (rule, value) => {
        return /^1[3-9]\d{9}$/.test(value);
      },
      message: "请输入正确的手机号格式",
      trigger: ["blur", "input"]
    }
  ],
  height: [
    { required: true, message: "请输入身高", trigger: ["blur", "input"] },
    {
      validator: (rule, value) => {
        return /^\d+(\.\d+)?$/.test(value) && value > 0 && value < 300;
      },
      message: "请输入有效的身高数值",
      trigger: ["blur", "input"]
    }
  ],
  weight: [
    { required: true, message: "请输入体重", trigger: ["blur", "input"] },
    {
      validator: (rule, value) => {
        return /^\d+(\.\d+)?$/.test(value) && value > 0 && value < 500;
      },
      message: "请输入有效的体重数值",
      trigger: ["blur", "input"]
    }
  ],
  role: [
    { 
      required: true, 
      type: 'number',  // 指定类型为number
      message: "请选择注册身份", 
      trigger: "change"  // 只在change时触发验证
    }
  ]
};

const handleRegister = () => {
  registerForm.value?.validate((errors) => {
    if (!errors) {
      // 执行注册逻辑
      reg();
    } else {
      message.error("请填写完整的注册信息");
    }
  });
};

const reg = async () => {
  registerLoading.value = true;
  try {
    let data = qs.stringify(saveUserForm.value);
    const regResponse = await axios.post(BASE_URL+'/v1/user/reg', data);
    
    if(regResponse.data.code === 2000) {
      message.success("注册成功，请登录");
      // 保存用户名，方便用户登录
      const username = saveUserForm.value.username;
      // 清空注册表单
      saveUserForm.value = {
        username: "",
        password: "",
        rePassword: "",
        phone: "",
        height: "",
        weight: "",
        role: 1
      };
      // 切换到登录标签
      activeTab.value = 'signin';
      // 自动填充用户名
      loginForm.value.username = username;
    } else {
      message.error(regResponse.data.msg);
    }
  } catch (error) {
    console.error(error);
    message.error("注册失败，请稍后重试");
  } finally {
    registerLoading.value = false;
  }
};

const login = () => {
  loginLoading.value = true;
  let data = qs.stringify(loginForm.value);
  axios.post(BASE_URL+'/v1/user/login',data).then(async (response)=>{
    if(response.data.code === 2000 ){
      // 先保存登录返回的token信息
      localStorage.user = JSON.stringify(response.data.data);
      
      try {
        // 发送用户名参数到select接口
        const userResponse = await axios.get(BASE_URL+'/v1/user/select', {
          params: {
            username: loginForm.value.username
          }
        });
        if (userResponse.data.code === 2000) {
          const userData = {
            ...userResponse.data.data,
            tokenInfo: response.data.data.tokenInfo
          };
          localStorage.user = JSON.stringify(userData);
          console.log("获取到的用户信息:", userResponse.data.data);
          message.success("登录成功");
          loginForm.value = {
            username: "",
            password: ""
          };
          router.push('/');
        }
      } catch (err) {
        console.error("获取用户信息失败:", err);
        message.error("获取用户信息失败");
      }
    } else {
      message.error(response.data.msg)
    }
  }).catch(error => {
    message.error("登录失败，请稍后重试");
    console.error(error);
  }).finally(() => {
    loginLoading.value = false;
  });
};

// 监听路由参数，设置当前激活的标签(点击注册时，跳转到登录页面的注册标签，因为使用了n-tab)
onMounted(() => {
  const tab = route.query.tab;
  if (tab === 'signin' || tab === 'signup') {
    activeTab.value = tab;
  }
});
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 25%, #90caf9 50%, #64b5f6 75%, #42a5f5 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.floating-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: float 6s ease-in-out infinite;
}

.shape-1 {
  width: 80px;
  height: 80px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.shape-2 {
  width: 60px;
  height: 60px;
  top: 20%;
  right: 20%;
  animation-delay: 1s;
}

.shape-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
  animation-delay: 2s;
}

.shape-4 {
  width: 40px;
  height: 40px;
  top: 60%;
  right: 10%;
  animation-delay: 3s;
}

.shape-5 {
  width: 120px;
  height: 120px;
  bottom: 10%;
  right: 30%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.3;
  }
}

/* 健身器械装饰元素 */
.fitness-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.fitness-icon {
  position: absolute;
  animation: fitnessFloat 8s ease-in-out infinite;
  opacity: 0.8;
}

.dumbbell-1 {
  top: 15%;
  left: 8%;
  animation-delay: 0s;
  animation-duration: 10s;
}

.barbell-1 {
  top: 25%;
  right: 12%;
  animation-delay: 2s;
  animation-duration: 12s;
}

.treadmill-1 {
  bottom: 30%;
  left: 15%;
  animation-delay: 4s;
  animation-duration: 14s;
}

.equipment-1 {
  top: 70%;
  right: 8%;
  animation-delay: 1s;
  animation-duration: 11s;
}

.dumbbell-2 {
  bottom: 15%;
  right: 25%;
  animation-delay: 3s;
  animation-duration: 9s;
}

.dumbbell-3 {
  top: 40%;
  left: 5%;
  animation-delay: 5s;
  animation-duration: 13s;
}

.fitness-ball {
  bottom: 35%;
  right: 15%;
  animation-delay: 6s;
  animation-duration: 15s;
}

.yoga-mat {
  top: 80%;
  left: 25%;
  animation-delay: 2.5s;
  animation-duration: 16s;
}

/* 新增健身元素样式 */
.weightlifting-1 {
  top: 10%;
  right: 5%;
  animation-delay: 7s;
  animation-duration: 18s;
}

.boxing-gloves {
  bottom: 20%;
  right: 8%;
  animation-delay: 8s;
  animation-duration: 11s;
}

.dumbbell-rack {
  top: 65%;
  left: 12%;
  animation-delay: 9s;
  animation-duration: 14s;
}

.running-shoes {
  bottom: 60%;
  right: 25%;
  animation-delay: 10s;
  animation-duration: 17s;
}

.timer {
  top: 45%;
  right: 30%;
  animation-delay: 11s;
  animation-duration: 13s;
}

/* 粒子装饰效果 */
.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  animation: particleFloat 12s ease-in-out infinite;
}

.particle-1 {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
  animation-duration: 18s;
}

.particle-2 {
  top: 60%;
  right: 20%;
  animation-delay: 3s;
  animation-duration: 15s;
}

.particle-3 {
  bottom: 25%;
  left: 30%;
  animation-delay: 6s;
  animation-duration: 20s;
}

.particle-4 {
  top: 35%;
  right: 35%;
  animation-delay: 9s;
  animation-duration: 14s;
}

.particle-5 {
  bottom: 45%;
  left: 10%;
  animation-delay: 12s;
  animation-duration: 16s;
}

.particle-6 {
  top: 75%;
  right: 10%;
  animation-delay: 15s;
  animation-duration: 22s;
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.4;
  }
  25% {
    transform: translateY(-40px) scale(1.5);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-80px) scale(0.8);
    opacity: 0.3;
  }
  75% {
    transform: translateY(-40px) scale(1.2);
    opacity: 0.6;
  }
}

@keyframes fitnessFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-15px) rotate(90deg) scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-30px) rotate(180deg) scale(0.9);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-15px) rotate(270deg) scale(1.05);
    opacity: 0.7;
  }
}

/* 主要内容区域 */
.content-wrapper {
  width: 100%;
  max-width: 700px; /* 进一步增大卡片宽度 */
  z-index: 1;
  position: relative;
}

/* Logo 和标题区域 */
.header-section {
  text-align: center;
  margin-bottom: 40px; /* 增加间距 */
}

.logo-container {
  background: rgba(255, 255, 255, 0.18); /* 增加透明度 */
  backdrop-filter: blur(20px); /* 增强模糊效果 */
  border-radius: 30px; /* 增大圆角 */
  padding: 50px 40px; /* 增大内边距 */
  margin-bottom: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.logo-icon {
  margin-bottom: 20px;
  animation: logoFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6)) 
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
}

.logo-icon:hover {
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9)) 
          drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
  transform: scale(1.1);
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.05); /* 增加缩放效果 */
  }
}

.app-title {
  font-size: 4rem; /* 进一步增大字体 */
  font-weight: 900; /* 保持最大字重 */
  color: white;
  margin: 0 0 15px 0;
  text-shadow: 
    0 0 20px rgba(255, 255, 255, 0.8),
    0 4px 8px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(66, 165, 245, 0.4);
  letter-spacing: 6px; /* 增加字间距 */
  background: linear-gradient(135deg, #ffffff 0%, #e3f2fd 30%, #90caf9 60%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Microsoft YaHei', 'Arial', sans-serif;
  text-transform: uppercase;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.app-subtitle {
  font-size: 1.2rem; /* 增大副标题字体 */
  color: rgba(255, 255, 255, 0.95);
/* 登录注册卡片 */
.login-card {
  background: rgba(255, 255, 255, 0.95); /* 优化透明度 */
  backdrop-filter: blur(30px); /* 增强模糊效果 */
  border-radius: 32px; /* 增大圆角 */
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2); /* 增强阴影 */
  padding: 60px 55px; /* 增大内边距 */
  transition: all 0.4s ease;
  min-height: 700px; /* 增加最小高度 */
} box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15); /* 增强阴影 */
  padding: 50px 45px; /* 增大内边距 */
.login-card:hover {
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.25);
  transform: translateY(-5px); /* 增加悬浮效果 */
}
.login-card:hover {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px); /* 增加悬浮效果 */
}

.card-tabs {
  width: 100%;
}

/* 表单区域 */
.form-section {
  padding-top: 30px;
}

.form-section .n-form-item {
  margin-bottom: 28px; /* 增加间距 */
  position: relative;
}

.form-section .n-form-item::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #18a058 50%, transparent 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.form-section .n-form-item:focus-within::before {
  transform: scaleX(1);
}

/* 双列布局 */
.form-row {
  display: flex;
  gap: 20px; /* 增加间距 */
  margin-bottom: 25px;
}

.half-width {
  flex: 1;
  margin-bottom: 0 !important;
}

/* 身份选择区域 */
.role-selection {
  width: 100%;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 20px;
  padding: 25px 20px;
  border: 1px solid rgba(24, 160, 88, 0.08);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-top: 10px;
}

/* 身份指引卡片样式 */
.role-instruction-card {
  margin-bottom: 25px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(24, 160, 88, 0.08) 0%, rgba(24, 160, 88, 0.03) 100%);
  border: 1px solid rgba(24, 160, 88, 0.15);
  box-shadow: 0 2px 8px rgba(24, 160, 88, 0.1);
  transition: all 0.3s ease;
}

.role-instruction-card:hover {
  box-shadow: 0 4px 12px rgba(24, 160, 88, 0.15);
  transform: translateY(-1px);
}

/* 使用深度选择器自定义Card样式 */
:deep(.role-instruction-card .n-card__content) {
  padding: 16px 20px 12px 20px;
}

:deep(.role-instruction-card .n-card-header) {
  padding: 16px 20px 8px 20px;
  border-bottom: none;
}

:deep(.role-instruction-card .n-card-header__main) {
  font-size: 16px;
  font-weight: 600;
}

/* 图标样式优化 - 使用深度选择器 */
:deep(.role-content .n-icon) {
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(24, 160, 88, 0.1);
  border-radius: 50%;
  margin-bottom: 4px;
}

:deep(.role-option.n-radio--checked .role-content .n-icon) {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 4px rgba(24, 160, 88, 0.3));
  background: rgba(24, 160, 88, 0.2);
}

:deep(.role-content:hover .n-icon) {
  transform: scale(1.05);
  background: rgba(24, 160, 88, 0.15);
}

/* 文字样式 */
.role-content span {
  line-height: 1.2;
  white-space: nowrap;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

/* 动画效果 */
@keyframes cardSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulseGreen {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(24, 160, 88, 0.25);
  }
  50% {
    box-shadow: 0 8px 30px rgba(24, 160, 88, 0.4);
  }
}

/* 按钮样式 */
.login-actions,
.register-actions {
  margin-top: 40px; /* 增加间距 */
}

.login-btn,
.register-btn {
  height: 60px; /* 增加高度 */
  font-size: 18px; /* 增大字体 */
  font-weight: 700; /* 增加字重 */
  background: linear-gradient(135deg, #18a058 0%, #52c41a 100%);
  border: none;
  box-shadow: 0 8px 25px rgba(24, 160, 88, 0.4); /* 增强阴影 */
  transition: all 0.3s ease;
  letter-spacing: 1.5px; /* 增加字间距 */
} border: none;
  box-shadow: 0 6px 20px rgba(24, 160, 88, 0.35); /* 增强阴影 */
  transition: all 0.3s ease;
  letter-spacing: 1px; /* 添加字间距 */
}

.login-btn:hover,
.register-btn:hover {
  transform: translateY(-4px); /* 增加悬浮效果 */
  box-shadow: 0 12px 35px rgba(24, 160, 88, 0.5);
  background: linear-gradient(135deg, #20b961 0%, #5dd662 100%);
}

.login-btn:active,
.register-btn:active {
  transform: translateY(-1px);
}

/* 输入框样式优化 */
:deep(.n-input) {
  border-radius: 32px; /* 进一步增大圆角 */
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

:deep(.n-input:hover) {
  border-color: #18a058;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 15px rgba(24, 160, 88, 0.15);
  transform: translateY(-1px);
}

:deep(.n-input.n-input--focus) {
  border-color: #18a058;
  box-shadow: 0 0 0 4px rgba(24, 160, 88, 0.12); /* 增强焦点阴影 */
  background: rgba(255, 255, 255, 1);
}

:deep(.n-input .n-input__input-el) {
  padding: 18px 28px 18px 55px; /* 增加内边距 */
  font-size: 17px; /* 增大字体 */
  font-weight: 500;
}

:deep(.n-input .n-input__prefix) {
  left: 22px; /* 调整图标位置 */
}

/* Tab 样式 */
:deep(.n-tabs .n-tabs-nav) {
  background: rgba(248, 249, 250, 0.9);
  border-radius: 20px; /* 增大圆角 */
  padding: 8px; /* 增加内边距 */
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

:deep(.n-tabs .n-tabs-tab) {
  border-radius: 16px; /* 增大圆角 */
  transition: all 0.3s ease;
  font-weight: 600; /* 增加字重 */
  font-size: 17px; /* 增大字体 */
  padding: 15px 30px; /* 增加内边距 */
}

:deep(.n-tabs .n-tabs-tab.n-tabs-tab--active) {
  background: white;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15); /* 增强阴影 */
  color: #18a058;
  transform: translateY(-1px);
}

:deep(.n-tabs .n-tabs-tab:hover) {
  background: rgba(255, 255, 255, 0.7);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    max-width: 90%;
    margin: 0 auto;
  }
  
  .login-card {
    padding: 30px 20px;
  }
  
  .app-title {
    font-size: 2rem;
  }
  
  .logo-container {
    padding: 20px 15px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .half-width {
    margin-bottom: 20px !important;
  }
  
  .role-options {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  /* 移动端深度选择器样式 */
  :deep(.role-group .n-radio-group) {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .role-content {
    flex-direction: row;
    gap: 15px;
    padding: 18px 16px;
    min-height: 65px;
  }
  
  :deep(.role-content .n-icon) {
    width: 28px;
    height: 28px;
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .app-title {
    font-size: 1.8rem;
  }
  
  .login-card {
    padding: 25px 15px;
  }
}
</style>